<template>
	<div class="course df fdc" @click="changeFn">
		<div class="course__image">
			<el-image style="width: 100%; height: 166px;" :src="item?.cover" fit="cover" />
			<div class="course__shwa">
				<img src="@/assets/images/play.png" alt="" />
			</div>
		</div>
		<div class="course__item-box df fdc jsb">
			<div class="course__bg --active row2" v-if="!isSearch">{{ item?.title }}</div>
			<div class="course__bg row2" v-else v-html="highlightSearchTerm(item?.title)">
			</div>
			<div class="course__bgs df jsb ac">
				<div class="compulsory">{{ item?.description }}</div>
				<div class="timer">时长 {{ convertSecondsToHMS(item?.totalTimes) }}</div>
				<div class="timer" v-if="isHideStudy">学习进度 {{ '10%' }}</div>
			</div>
		</div>
	</div>
</template>

<script setup lang="ts">
import { convertSecondsToHMS } from '@/utils/utils';
import { useRouter } from 'vue-router';

//组件命名-----
defineOptions({ name: "course-item-index" });
const props = withDefaults(
	defineProps<{
		item?: any;
		//是否隐藏学习进度
		isHideStudy?: boolean;
		//是否开启搜索词高亮
		isSearch?: boolean;
		//搜索关键词
		searName?: string;
	}>(),
	{
		isHideStudy: false,
		isSearch: false,
		searName: '',
		item: () => { },
		isReplace: false
	}
);
/**
 * 高亮搜索词
 *
 * @param text 待搜索的文本
 * @param searchName 搜索词
 * @returns 返回包含高亮样式的新文本
 */
const highlightSearchTerm = (text) => {
	// 创建一个正则表达式，用于匹配搜索词（不区分大小写）
	const regex = new RegExp(props.searName, 'gi');
	// 使用 replace 方法替换匹配的文本，并添加高亮样式
	return text.replace(regex, '<span style="color:#0087FD;">$&</span>');
}
const router = useRouter()
const changeFn = () => {
	router.push({
		path: 'videoc',
		query: {
			courseId: props.item.id,
			courseType: props.item.courseType
		}
	})
}
</script>

<style lang="scss" scoped>
.course {
	background-color: var(--course-item-bgcolor, $white);
	margin-left: 20px;
	margin-bottom: 20px;
	width: 285px;
	height: 316px;
	position: relative;
	transition: 0.2s ease;
	top: 0;
	border-radius: 10px;
	overflow: hidden;

	&:nth-child(4n -3) {
		margin-left: 0;
	}

	&:hover {
		top: -10px;

		.course__shwa {
			display: block;
			opacity: 0.5;
		}

		.--active {
			color: $bcolor;
		}

	}

	&__image {
		width: 100%;
		height: 166px;
	}

	&__shwa {
		display: none;
		position: absolute;
		top: 0;
		width: 100%;
		height: 166px;
		z-index: 998;
		background-color: #000000;
		border-radius: 10px 10px 0 0;
		opacity: 0;

		img {
			width: 50px;
			height: 50px;
			position: absolute;
			z-index: 999;
			top: 50%;
			left: 50%;
			transform: translate(-50%, -50%);
		}
	}

	&__item-box {
		padding: 30px 10px 20px 10px;
		flex: 1;

	}



	&__bgs {
		.compulsory {
			background-color: $bcolor;
			font-size: 14px;
			// width: 55px;
			padding: 0 6px;
			height: 26px;
			line-height: 26px;
			text-align: center;
			color: $white;
			border-radius: 3px;
		}

		.timer {
			color: $color1;
			font-size: 16px;
		}
	}
}
</style>
